<script setup lang="ts">
import { useUserStore } from '@/store/modules/user_store'
import {$bus} from '@/event_bus/event_bus_index'
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { ElForm } from 'element-plus';
import { NslUtil4Vue } from '@/utils/NslUtil4Vue';
const userStore = useUserStore()

const { queryParamsRef } = storeToRefs(userStore)
const queryFormRef = NslUtil4Vue.componentRef(ElForm) // 查询表单

const search = () => {
    $bus.emit('user-table-query');
    console.log('emit search event');
    console.log('queryParamsRef',queryParamsRef.value);
    
}

function reset() {
    queryFormRef.value?.resetFields()
    dateTimeRange.value = undefined
    userStore.resetQueryParams()
    $bus.emit('user-table-query');
    console.log('emit search event');
    console.log('queryParamsRef',queryParamsRef.value);
}

console.log('queryParams', queryParamsRef)

const dateTimeRange = ref<[string, string] | undefined>(['', ''])
watch(dateTimeRange, (newV) => {
    if (newV) {
        queryParamsRef.value.startTime = newV[0]
        queryParamsRef.value.endTime = newV[1]
    }
})

//对外暴露
defineExpose({
    reset,
})
</script>
<template>
    <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParamsRef" :inline="true">
            <el-form-item label="关键字" prop="keywords">
                <el-input
                    v-model="queryParamsRef.keywords"
                    placeholder="用户名/昵称/手机号"
                    clearable
                    style="width: 200px"
                    @keyup.enter="search"
                />
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-select
                    v-model="queryParamsRef.status"
                    placeholder="全部"
                    clearable
                    class="!w-[100px]"
                    style="width:  100px !important;"
                >
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-date-picker
                    class="!w-[240px]"
                    v-model="dateTimeRange"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始时间"
                    end-placeholder="截止时间"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search"> <el-icon-search />搜索 </el-button>

                <el-button @click="reset"> <el-icon-refresh />重置 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style lang="scss" scoped></style>
